<template>
    <el-dialog
    v-model="dialogVisible"
    :title="state.title"
    width="80%"
    :before-close="handleClose"
  >
    <VueOfficePdf :src="state.PdfURL"></VueOfficePdf>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleDownload">
          下载PDF
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="previewPDF">
import VueOfficePdf from "@vue-office/pdf";
import {previewPDF,downBlobFile} from '/@/utils/other'
const dialogVisible = ref(false)

const state = reactive<any>({
    PdfURL:'',
    src:'',
    title:''
})

function open(src:any,title:any){
    dialogVisible.value = true;
    state.title = title
    state.src = src
    previewPDF(state.src).then(res=>{
        state.PdfURL = res
    })
}

function handleClose(){
    dialogVisible.value = false
}

function handleDownload(){
    downBlobFile(state.src,{},state.title)
}
defineExpose({
    open
})
</script>

<style scoped lang="scss">

</style>